<template>
  <van-config-provider>
    <router-view v-slot="{ Component }">
      <keep-alive :include="['HomeView','InspireView','SearchResultView','RecommandView']">
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <div>
      <van-tabbar v-model="active" @change="onChange" :route="true" active-color="#f3533f" inactive-color="#9fa4aa">
        <van-tabbar-item to="/home">
          <span>首页</span>
          <template #icon="props">
            <van-icon class-prefix="iconfont" :name="props.active ? 'home-active' : 'home-default'"></van-icon>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/recommand">
          <span>搭配</span>
          <template #icon="props">
            <van-icon class-prefix="iconfont" :name="props.active ? 'discover-active' : 'discover-default'"></van-icon>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/inspire">
          <span>灵感</span>
          <template #icon="props">
            <van-icon class-prefix="iconfont" :name="props.active ? 'inspire-active' : 'inspire-default'"></van-icon>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/message">
          <span>消息</span>
          <template #icon="props">
            <van-icon class-prefix="iconfont" :name="props.active ? 'message-active' : 'message-default'"></van-icon>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/mine">
          <span>我的</span>
          <template #icon="props">
            <van-icon class-prefix="iconfont" :name="props.active ? 'mine-active' : 'mine-default'"></van-icon>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </van-config-provider>
</template>
<script setup>
import { ref } from 'vue';
import { Tabbar as VanTabbar, TabbarItem as VanTabbarItem, Icon as VanIcon } from 'vant';
let active = ref(0);
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

:root:root {
  --van-white: #fff;
  --van-blue: #2f9afb;
  --van-button-primary-color: var(--van-white);
  --van-button-primary-background: var(--van-primary-color);
  --van-cell-label-color: #333;
  --van-nav-bar-title-text-color: var(--van-blue);
}
</style>
